<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>
<!DOCTYPE html>
<html>
<@layout.head title="人员管理">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@dataTables.fixedHeader_head/>
    <@mform.head/>
    <@select.head/>
</@layout.head>
<body>
<@layout.page>
    <div class="main-box">
        <div class="content">
            <!-- 表格 -->
            <div style="position: relative; top:40px; ">
                <@dataTables.commonTable id="mainTable"/>
            </div>
            <!-- 按钮 -->
            <div id="btnGroup" class="btn-group" style="position: absolute; top:40px;">
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:refreshData();">
                    <i class="fa fa-plus"></i> 查询
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:newdetail();">
                    <i class="fa fa-plus"></i> 新增
                </button>

                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:editdetail();">
                    <i class="fa fa-edit"></i> 修改
                </button>

                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:deldetail();">
                    <i class="fa fa-minus"></i> 删除
                </button>
            </div>
        </div>
    </div>
    <!-- 弹出窗 -->
    <@modal.editModal id="modal-detail" buttonId="btndetailSave" width="600px" >
        <@mform.container width="600" id="editForm">
            <input id="id" name="id" type="hidden"/>
            <@mform.row>
                <@mform.input_text id='name' name='name' size=6 label='人员姓名' placeholder='人员姓名' icon='fa-edit' />
                <@mform.input_text id='telephone' name='telephone' size=6 label='手机号' placeholder='手机号' icon='fa-edit' />
            </@mform.row>
            <@mform.row>
                <@mform.input_text id='job' name='job' size=6 label='职务' placeholder='职务' icon='fa-edit' />
                <@mform.select2 id='role' name='role' label="角色"  size=6>
                    <#list staffRole as item>
                        <option value="${item.value}">${item.text}</option>
                    </#list>
                </@mform.select2>
               <#--
                <@mform.input_text id='role' name='role' size=6 label='角色' placeholder='角色' icon='fa-edit' />-->
            </@mform.row>
            <@mform.row>
                <@mform.input_text id='organizationId' name='organizationId' size=6 label='所属机构id' placeholder='所属机构id' icon='fa-edit' />
                <@mform.select2 id='state' name='state' label="状态"  size=6>
                    <#list organizationState as item>
                        <option value="${item.value}">${item.text}</option>
                    </#list>
                </@mform.select2>
            </@mform.row>
        </@mform.container>
    </@modal.editModal>
</@layout.page>
<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@dataTables.fixedHeader_foot/>
    <@mform.foot/>
    <script src="${request.contextPath}/assets/js/jquery.serializejson.min.js?v=3653060703"></script>
    <script type="text/javascript">
        var now = new Date();
        var begin = now.getFullYear() + "-" + (now.getMonth() + 1) + "-1";
        var endD;
        var nextMonth = now.getMonth() + 1;
        var nextMonthFirstDay = new Date(now.getFullYear(), nextMonth, 1);
        var oneDay = 1000 * 60 * 60 * 24;
        endD = new Date(nextMonthFirstDay - oneDay);
        var end = endD.getFullYear() + "-" + (endD.getMonth() + 1) + "-" + endD.getDate();
        $("#startdate").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            initialDate: new Date(),
            todayBtn: true
        });
        $("#startdate").val(begin);
        $("#enddate").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            todayBtn: true
        });
        $("#enddate").val(end);
        var State = {
            <#list organizationState as item>
            "${item.value}": "${item.name}",
            </#list>
        }
        var columns = [
            {'sWidth': '200px', 'title': 'ID', 'data': 'id'},
            {'sWidth': '200px', 'title': '人员姓名', 'data': 'name'},
            {'sWidth': '200px', 'title': '手机号', 'data': 'telephone'},
            {'sWidth': '200px', 'title': '职务', 'data': 'job'},
            {'sWidth': '200px', 'title': '角色', 'data': 'role'},
            {'sWidth': '200px', 'title': '状态', 'data': 'state'},
            {'sWidth': '300px', 'title': '创建时间', 'data': 'createTime'},
            {'sWidth': '300px', 'title': '修改时间', 'data': 'updateTime'}
        ]
        var mainTable = $('#mainTable').winningTable({
            columns: columns,
            usePager: false,
            "paging": false,
            pageLength: 5,
            fixedHeader: false,
            searching: true,
            ordering: true,
            "columnDefs": [{
                "targets": [0],
                "visible": false
            }],
            buttons: [

            ],
            "rowCallback": function (row, data, index) {
            },
            createdRow: function (row, data, dataIndex) {
                $('td', row).eq(4).html((State[data.state] || "无"));
            }
        });

        // 刷新
        function refreshData() {
            mainTable.queryData("${request.contextPath}/base/staff/queryList");
        }
        refreshData();
        // 新增
        function newdetail() {
            $('#modal-detail').find(".modal-title").text('新增人员');
            clearForm($('#modal-detail'));
            $("#btndetailSave").unbind();
            $("#btndetailSave").click(savedetail);
            $('#modal-detail').modal();
        }
        // 修改
        function editdetail() {
            var datas = mainTable.getSelectedDatas();
            if (datas == null || datas.length == 0 || datas.length > 1) {
                swal("错误", "请选择一行数据", "error");
                return;
            }
            var $modal = $("#modal-detail");
            $modal.find(".modal-title").text("修改人员信息");
            clearForm($modal);
            var data = datas[0];
            initFormItemData($("#editForm"), data);
            $modal.modal();
            $("#btndetailSave").unbind();
            $("#btndetailSave").click(savedetail);
        }
        // 保存
        function savedetail() {
            swal({
                title: "确定保存",
                text: "是否确定保存此数据",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的,确定",
                cancelButtonText: "取消"
            }).then(function (result) {
                if (!result.value)
                    return;
                var requestData = $("#modal-detail form").serializeJSON();
                var params = {datas: JSON.stringify(requestData)};
                $.ajax({
                    type: 'POST',
                    data: params,
                    url: '${request.contextPath}/base/staff/save',
                    success: function (data) {
                        //成功之后
                        if (data.success) {
                            swal({
                                title: "成功",
                                text: "操作成功!",
                                type: "success",
                                showCancelButton: false,
                                confirmButtonText: "确定"
                            }).then(function (result) {
                                $("#modal-detail").modal('hide');
                                refreshData();
                            });
                        } else {
                            swal("错误", data.errorMsg, "error");
                        }
                    },
                    error: function (xhr, type) {
                        swal("错误", "系统发生内部错误!请稍后再试!", "error");
                    }
                });
            });
        }

        // 删除
        function deldetail() {
            var datas = mainTable.getSelectedDatas();
            if (datas == null || datas.length == 0 || datas.length > 1) {
                swal("错误", "请选择一行数据", "error");
                return;
            }
            var data = datas[0];
            swal({
                title: "确定删除",
                text: "是否确定删除此数据",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的,确定",
                cancelButtonText: "取消"
            }).then(function (result) {
                if (!result.value)
                    return;
                var requestData = {
                    id: data.id
                };
                var params = {datas: JSON.stringify(requestData)};
                $.ajax({
                    type: 'POST',
                    data: params,
                    url: '${request.contextPath}/base/staff/delete',
                    success: function (data) {
                        //成功之后
                        if (data.success) {
                            swal({
                                title: "成功",
                                text: "操作成功!",
                                type: "success",
                                showCancelButton: false,
                                confirmButtonText: "确定"
                            }).then(function (result) {
                                refreshData();
                            });
                        } else {
                            swal("错误", data.errorMsg, "error");
                        }
                    },
                    error: function (xhr, type) {
                        swal("错误", "系统发生内部错误!请稍后再试!", "error");
                    }
                });
            });
        }
    </script>
</@layout.foot>
</body>
</html>